<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>

</head>

<body>
    <div class="row-fluid">
        <div id="content" class="span10" style="width: 100%;overflow-x: scroll;">
            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">工况调节中心</a></li>
            </ul>
            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white user"></i><span class="break"></span>工况调节中心</h2>
                        <div class="box-icon"></div>
                    </div>
                    <div id="app" class="app" v-cloak>
                        <el-container>
                            <el-main style="overflow:hidden;">
                                <el-row class="height50 flex backcolor">
                                    <el-col :span="2">选择图谱: </el-col>
                                    <el-col :span="6">
                                        <el-select v-model="konwChartValue" placeholder="请选择图谱" clearable @change="getDataByKonwChart"
                                            size="mini">
                                            <el-option v-for="item in konwChartValueList" :key="item.value" :label="item.label"
                                                :value="item.value"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form :model="{obj: getFormData}" ref="formData">
                                            <el-row v-for="(item, index) in getFormData" :key="index" class="height50">
                                                <el-col :span="24">
                                                    <!-- <el-form-item> -->
                                                    <el-row style="padding-left: 10px;">
                                                        <el-col :span="2">{{index === 0 ? '调节条件: ' : ''}}</el-col>
                                                        <el-col :span="22">
                                                            <el-row :gutter="10">
                                                                <el-col :offset="index === 0 ? 0 : 2" :span="2">
                                                                    <div class="dateSelectTitle">工作时间选择：</div>
                                                                </el-col>
                                                                <el-col :span="4">
                                                                    <el-form-item :prop="'obj.'+ index + '.selectDate'"
                                                                                  :rules="rules.selectDate">
                                                                    <el-select v-model="item.selectDate" multiple placeholder="请选择日期"
                                                                               size="small" style="width: 330px!important;"
                                                                                @change="dateSelectChange">
                                                                        <el-option-group
                                                                                v-for="group in options"
                                                                                :key="group.label"
                                                                                :label="group.label">
                                                                            <el-option
                                                                                    v-for="item in group.options"
                                                                                    :key="item.value"
                                                                                    :label="item.label"
                                                                                    :value="item.value"
                                                                                    :disabled="item.disabled">
                                                                            </el-option>
                                                                        </el-option-group>
                                                                    </el-select>
                                                                    </el-form-item>
                                                                </el-col>
                                                            </el-row>
                                                            <el-row :gutter="10">
                                                                <el-col :span="8" :offset="index === 0 ? 2 : 4">
                                                                    <template v-for="(secondOption, secondOptionIndex) in item.secondOptions">
                                                                        <el-row :gutter="30">
                                                                            <el-col :span="12">
                                                                                <el-form-item
                                                                                    :prop="'obj.'+ index + '.secondOptions.' + secondOptionIndex + '.pointId'"
                                                                                    :rules="rules.pointId">
                                                                                    <el-select v-model="secondOption.pointId" filterable
                                                                                        placeholder="请选择点位" clearable size="mini">
                                                                                        <el-option v-for="option in pointId"
                                                                                            :key="option.value" :label="option.label"
                                                                                            :value="option.value">
                                                                                        </el-option>
                                                                                    </el-select>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                            <el-col :span="6">
                                                                                <el-form-item
                                                                                    :prop="'obj.'+ index + '.secondOptions.' + secondOptionIndex + '.symbolValue'"
                                                                                    :rules="rules.symbolValue">
                                                                                    <el-select v-model="secondOption.symbolValue"
                                                                                        placeholder="--" clearable size="mini">
                                                                                        <el-option v-for="option in initSymbols"
                                                                                            :key="option.value" :label="option.label"
                                                                                            :value="option.value">
                                                                                        </el-option>
                                                                                    </el-select>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                            <el-col :span="6">
                                                                                <el-form-item
                                                                                    :prop="'obj.'+ index + '.secondOptions.' + secondOptionIndex + '.conditionInputValue'"
                                                                                    :rules="rules.conditionInputValue">
                                                                                    <el-input v-model="secondOption.conditionInputValue"
                                                                                        placeholder="请输入条件值" clearable size="mini" />
                                                                                </el-form-item>
                                                                            </el-col>
                                                                        </el-row>
                                                                        <el-row :gutter="20">
                                                                            <el-col
                                                                                v-if="secondOptionIndex !== formData[index]?.secondOptions.length-1"
                                                                                :span="8" style="width: 180px;">
                                                                                <el-form-item
                                                                                    :prop="'obj.'+ index + '.secondOptions.' + secondOptionIndex + '.connectValue'"
                                                                                    :rules="rules.connectValue">
                                                                                    <el-select v-model="secondOption.connectValue"
                                                                                        placeholder="请选择" clearable size="mini">
                                                                                        <el-option v-for="option in initConnects"
                                                                                            :key="option.value" :label="option.label"
                                                                                            :value="option.value">
                                                                                        </el-option>
                                                                                    </el-select>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                            <el-col :span="12">
                                                                                <el-form-item>
                                                                                    <el-button type="danger" :disabled="canDelete(index)"
                                                                                               @click="deleteOptions(index, secondOptionIndex)"
                                                                                               size="mini">删除
                                                                                    </el-button>
                                                                                    <el-button type="primary"
                                                                                        v-if="secondOptionIndex === formData[index]?.secondOptions.length-1"
                                                                                        @click="addOptions(index)" size="mini">添加条件</el-button>
                                                                                </el-form-item>
                                                                            </el-col>
                                                                        </el-row>
                                                                    </template>
                                                                </el-col>
                                                                <el-col :span="2">
                                                                    <el-form-item
                                                                            :prop="'obj.'+ index + '.isOpen'"
                                                                            :rules="rules.isOpen">
                                                                        <el-select v-model="item.isOpen"
                                                                                   placeholder="开/关" clearable size="mini" >
                                                                            <el-option v-for="option in initIsOpen"
                                                                                       :key="option.value" :label="option.label"
                                                                                       :value="option.value">
                                                                            </el-option>
                                                                        </el-select>
                                                                    </el-form-item>
                                                                </el-col>
                                                                <el-col :span="5">
                                                                    <el-form-item :prop="'obj.'+ index + '.impactOptionsValue'"
                                                                        :rules="rules.impactOptionsValue">
                                                                        <el-select v-model="item.impactOptionsValue" placeholder="请选择目标工况"
                                                                            clearable size="small">
                                                                            <el-option v-for="option in initOptions" :key="option.value"
                                                                                :label="option.label" :value="option.value"></el-option>
                                                                        </el-select>
                                                                    </el-form-item>
                                                                </el-col>
                                                                <el-col :span="3">
                                                                    <el-form-item :prop="'obj.' + index + '.workTime'">
                                                                        <el-input-number v-model="item.workTime" :max="1440" label="工作时间"
                                                                                         placeholder="请输入工作时间" clearable size="mini" />
                                                                    </el-form-item>
                                                                </el-col>
                                                                <el-col :span="1" style="padding-top:5px;">
                                                                    分钟
                                                                </el-col>
                                                            </el-row>
                                                        </el-col>
                                                    </el-row>
                                                    <!-- </el-form-item> -->
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </el-col>
                                </el-row>
                                <br />
                                <el-row>
                                    <el-col :offset="2">
                                        <el-button type="primary" @click="add" size="mini" :disabled="konwChartValue === ''">添加一行
                                        </el-button>
                                    </el-col>
                                </el-row>
                                <br />
                                <el-row class="btnGroup">
                                    <el-button type="primary" @click="submitFormData" size="mini"
                                        :disabled="konwChartValue === ''">提交</el-button>
                                    <el-button @click="backFormData" size="mini">返回</el-button>
                                </el-row>
                            </el-main>
                        </el-container>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.js}"></script>
    <script th:src="@{/js/elementui/index.js}"></script>

    <script>
        const SYMBOL_ENUM = [
            {
                value: '>',
                label: '>'
            },
            {
                value: '<',
                label: '<'
            },
            {
                value: '==',
                label: '=='
            },
            {
                value: '<=',
                label: '<='
            },
            {
                value: '>=',
                label: '>='
            }
        ];
        const CONNECT_ENUM = [
            {
                value: 'or',
                label: 'or'
            },
            {
                value: 'and',
                label: 'and'
            }
        ];
        var vm = new Vue({
            el: '#app',
            data: {
                konwChartValueList: [],
                konwChartValue: '',
                initOptions: [],
                initSymbols: SYMBOL_ENUM,
                initConnects: CONNECT_ENUM,
                initSecondOptions: [{
                    pointId: '',
                    symbolValue: '',
                    conditionInputValue: '',
                    connectValue: ''
                }],
                props: { multiple: true },
                formData: [],
                initFormData: [],
                rules: {
                    optionsValue: [{ required: true, message: ' ', trigger: 'change' }],
                    impactOptionsValue: [{ required: true, message: ' ', trigger: 'change' }],
                    pointId: [{ required: true, message: ' ', trigger: 'change' }],
                    symbolValue: [{ required: true, message: ' ', trigger: 'change' }],
                    conditionInputValue: [{ required: true, message: ' ', trigger: 'blur' }],
                    connectValue: [{ required: true, message: ' ', trigger: 'change' }],
                    isOpenValue: [{ required: true, message: ' ', trigger: 'change' }],
                    // selectDate: [{ required: true, message: ' ', trigger: 'change' }]
                },
                options: [{
                    label: '类别一',
                    options: [{
                        value: '1',
                        label: '周一',
                        disabled: false
                    }, {
                        value: '2',
                        label: '周二',
                        disabled: false
                    }, {
                        value: '3',
                        label: '周三',
                        disabled: false
                    }, {
                        value: '4',
                        label: '周四',
                        disabled: false
                    }, {
                        value: '5',
                        label: '周五',
                        disabled: false
                    }, {
                        value: '6',
                        label: '周六',
                        disabled: false
                    }, {
                        value: '7',
                        label: '周日',
                        disabled: false
                    }]
                }, {
                    label: '类别二',
                    options: [{
                        value: '10',
                        label: '节假日',
                        disabled: false
                    }, {
                        value: '11',
                        label: '工作日',
                        disabled: false
                    }]
                }],
                pointId:[],
                initIsOpen:[{
                    value: 0,
                    label: '关闭'
                },{
                    value: 1,
                    label: '开启'
                }],
            },
            computed: {
                getFormData() {
                    return this.formData;
                },
                canDelete() {
                    return function (index) {
                        // if (this.formData[index]?.secondOptions.length === 1 && this.formData.length === 1) {
                        //     return true;
                        // }
                        return false;
                    }
                }
            },
            created() {
                this.getKonwChartData();
                this.getPointOptions();
            },
            methods: {
                getPointOptions:function(){
                    let that = this;
                    $.ajax({
                        type:'GET',
                        url:'/multipower/point/getAll',
                        success:function (data) {
                            if(data.status==1){
                                let res = [];
                                for(let i=0;i<data.data.length;i++){
                                    res.push({
                                        value: data.data[i].id,
                                        label: data.data[i].pointName,
                                        code: data.data[i].devCode,
                                    });
                                }
                                that.pointId = [...res];
                            }else{
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure:function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                getKonwChartData() {
                    that = this;
                    $.ajax({
                        type: "GET",
                        url: "/multipower/graphInfo/getall",
                        dataType: "json",
                        async: true,
                        success: function ({ data }) {
                            let res = [];
                            for (let item in data) {
                                res.push({
                                    value: data[item].graphId,
                                    label: data[item].graphName
                                })
                            }
                            that.konwChartValueList = [...res];
                        }
                    })
                },
                getDataByKonwChart: function () {
                    that = this;
                    $.ajax({
                        type: "GET",
                        url: "/multipower/relationship/getall?graphId=" + that.konwChartValue,
                        dataType: "json",
                        async: true,
                        success: function ({ data }) {
                            let res = [];
                            for (let item in data) {
                                res.push({
                                    value: data[item].resId,
                                    label: data[item].info
                                })
                            }
                            that.initOptions = [...res];
                        }
                    });
                    // $.ajax({
                    //     type: "GET",
                    //     url: "/multipower/device/getall?graphId=" + that.konwChartValue,
                    //     dataType: "json",
                    //     async: true,
                    //     success: function ({ data }) {
                    //         let res = [];
                    //         for (let item in data) {
                    //             res.push({
                    //                 value: data[item].devId,
                    //                 label: data[item].devCode
                    //             })
                    //         }
                    //         that.initConditions = [...res];
                    //     }
                    // });
                    $.ajax({
                        type: "GET",
                        url: "/multipower/dynamic/property/getall?graphId=" + that.konwChartValue,
                        dataType: "json",
                        async: false,
                        success: function ({ data }) {
                            let res = [];
                            for (let item in data) {
                                let temp = data[item].details?.map((i) => {
                                    return {
                                        pointId: i.pointId,
                                        symbolValue: i.symbol,
                                        conditionInputValue: i.value,
                                        connectValue: i.rel ?? ''
                                    }
                                });
                                res.push({
                                    selectDate: data[item].date,
                                    optionsValue: data[item].resId,
                                    impactOptionsValue: data[item].targetResId,
                                    secondOptions: temp,
                                    id: data[item].id,
                                    isOpen: data[item].isOpen,
                                    workTime: data[item].workTime
                                })
                            }
                            that.formData = [...res];
                            that.initFormData = [...res];
                        }
                    });
                },
                addOptions: function (index) {
                    this.formData[index]?.secondOptions.push(...JSON.parse(JSON.stringify(this.initSecondOptions)));
                },
                deleteOptions: function (index, secondOptionIndex) {
                    if (this.formData[index]?.secondOptions.length === 1) {
                        this.formData.splice(index, 1);
                    } else {
                        this.formData[index]?.secondOptions.splice(secondOptionIndex, 1);
                    }
                },
                submitFormData() {
                    that = this;
                    that.$refs['formData'].validate((valid) => {
                        if (valid) {
                            let data = { graphId: that.konwChartValue, properties: [] };
                            for (let item in that.formData) {
                                let temp = that.formData[item].secondOptions?.map((i) => {
                                    return {
                                        pointId: i.pointId,
                                        symbol: i.symbolValue,
                                        value: i.conditionInputValue,
                                        rel: i.connectValue
                                    }
                                });
                                data.properties.push({
                                    resId: that.formData[item].optionsValue,
                                    targetResId: that.formData[item].impactOptionsValue,
                                    details: temp,
                                    graphId: that.konwChartValue,
                                    id: that.formData[item].id,
                                    isOpen: that.formData[item].isOpen,
                                    workTime: that.formData[item].workTime,
                                    date: that.formData[item].selectDate
                                })
                            };
                            // console.log("data:",JSON.stringify(data));

                            this.$confirm('此操作将改变所有记录, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(()=>{
                                $.ajax({
                                    type: "POST",
                                    url: "/multipower/dynamic/property/modify",
                                    dataType: "json",
                                    contentType: "application/json",
                                    async: false,
                                    data: JSON.stringify(data)
                                });
                                //TODO 此处ajax不进success也不进failure
                                this.$alert('修改成功', '提示', {
                                    confirmButtonText: '确定',
                                });
                            }).catch(()=>{
                                this.$message({
                                    type: 'info',
                                    message: '已取消'
                                });
                            });
                        }
                        else {
                            return false;
                        }
                    })
                },
                backFormData() {
                    window.history.back(-1);
                },
                add() {
                    let data = JSON.parse(JSON.stringify(this.initSecondOptions));
                    this.formData.push({
                        selectDate:'',
                        optionsValue: '',
                        impactOptionsValue: '',
                        secondOptions: data,
                        id: -1,
                        isOpen: '',
                    })
                },
                dateSelectChange:function (data) {
                    if((data.includes('10')||data.includes('11'))&&(data.includes('1')||data.includes('2')||
                        data.includes('3')||data.includes('4')||data.includes('5')||data.includes('6')||
                        data.includes('7'))){
                        this.$alert('选了不同类别中的选项，请手动删除','提示',{
                            confirmButtonText: '确定',
                        });
                        for(let i=0;i<this.options[0].options.length;i++){
                            this.options[0].options[i].disabled = true;
                        }
                        for(let i=0;i<this.options[1].options.length;i++){
                            this.options[1].options[i].disabled = true;
                        }
                    }else{
                        for(let i=0;i<this.options[0].options.length;i++){
                            this.options[0].options[i].disabled = false;
                        }
                        for(let i=0;i<this.options[1].options.length;i++){
                            this.options[1].options[i].disabled = false;
                        }
                    }
                }
            }
        });
    </script>

    <script th:src="@{/js/detect-element-resize.js}"></script>
    <script th:src="@{/js/iframe-resize.js}"></script>
</body>

</html>